<template>
  <div class="goods-list flex flex-col">
    <div class="py-4 border-bottom sticky-top header flex justify-between px-4">
      <div class="flex items-center">
        <span>{{ t["商品列表"] }} [{{ goods.total }}]</span>
      </div>
    </div>
    <a-card :bordered="false" :body-style="{ padding: '0' }">
      <a-list>
        <a-list-item
          v-for="item in goods.list"
          :key="item"
          :class="{ active: active == item }"
          @click="selectItem(item)"
        >
          {{ item.goodsName }}
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { listGoods } from "@/api/service/goods/goods";
import { previewTpl } from "@/api/service/template/template";
import { stageConfig } from "@/views/paint/modules/data/stage";

import { previewImageSrc } from "./bus";

const t = translate("公共模块");
const goods = ref({
  list: [] as any,
  total: 0
});
onMounted(async () => {
  const res = await listGoods({
    pageSize: 20,
    pageNum: 1,
    total: 0
  });

  goods.value.list = res.rows;
  goods.value.total = res.total;
});
const active = ref(-1);
/**
 * 注释: 选择商品触发
 *
 * */
const selectItem = async (item: any) => {
  active.value = item;
  const config = { ...stageConfig.value };
  config.goodsId = item.goodsId;
  previewTpl({
    stage: config,
    templateList: []
  }).then((res) => {
    previewImageSrc.value = res.data;
  });
};
</script>

<style lang="scss" scoped>
.goods-list {
  width: 200px;
  height: 100%;
  background-color: white;
  overflow-y: auto;
  .active {
    background-color: var(--primary);
    color: white;
  }
}
</style>
